<template>
	<div class="Uesr1">
		<div style="float: left;">
			<el-input type="txte" v-model="queryInfo.username" placeholder="请输入内容" style="width: 200px;height: 50px;">
			</el-input>
			<el-button type="primary" icon="el-icon-search" @click="queryAll">查询</el-button>
		</div>
		<div style="float: right;">
			<el-button type="success" round @click="usermainadd">添加</el-button>
			<el-button type="danger" round>删除</el-button>
		</div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column label="#" type="index">
			</el-table-column>
			<el-table-column prop="adminName" label="账号">
			</el-table-column>

			<el-table-column prop="sex" label="性别">
			</el-table-column>

			<el-table-column prop="age" label="年龄">
			</el-table-column>

			<el-table-column prop="phone" label="电话">
			</el-table-column>
			<el-table-column prop="touXiang" label="头像">

				<template slot-scope="scope">
					<el-image style="width: 50px; height: 50px"
						:src="'http://localhost:8080/vuequeryimg?touXiang='+scope.row.touXiang" :fit="fit">
					</el-image>

				</template>
			</el-table-column>

			<el-table-column prop="email" label="邮箱">
			</el-table-column>

			<el-table-column prop="caozuo" label="操作" width="200px">
				<template slot-scope="scope">
					<!-- {{scope.row.id}} -->
					<el-tooltip class="item" effect="light" content="修改" placement="top">
						<el-button type="primary" @click="showById(scope.row.adminId)" icon="el-icon-edit" size="mini">
						</el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="light" content="删除" placement="top">
						<el-button type="danger" @click="deleteId(scope.row.adminId)" icon="el-icon-delete" size="mini" v-show="scope.row.adminId!=ad">
						</el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="light" content="分配角色" placement="top">
						<el-button type="warning" @click="fenJ(scope.row.adminId)" icon="el-icon-star-off" size="mini">
						</el-button>
					</el-tooltip>
				</template>

			</el-table-column>
		</el-table>



		<!-- 分页 -->

		<el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
			:page-sizes="[1, 4, 8, 10]" :page-size="3" layout="total, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<!-- 修改弹框 -->
		<el-dialog title="修改" :visible.sync="updatedialogFormVisible">


			<el-form :model="admin" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="用户名" prop="adminName">
					<el-input type="text" v-model="admin.adminName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="admin.password" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="性别" prop="sex">
					<el-input type="text" v-model="admin.sex" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="年龄" prop="age">
					<el-input type="text" v-model.number="admin.age" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="电话" prop="phone">
					<el-input type="text" v-model="admin.phone" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="头像">
					<!--
		 					action:上传的地址
		 					list-type：图片列表的展示格式 
		 					on-preview：图片放大后的函数
		 					on-remove：图片移除的函数
		 					on-success：处理返回数据的函数
		 					-->
					<el-upload action="http://localhost:8080/vueupload" list-type="picture-card"
						:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handSuccess"
						:file-list="fileList">
						<i class="el-icon-plus"></i>

					</el-upload>
					<!-- 预览的组件 -->
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>

				</el-form-item>

				<el-form-item label="邮箱" prop="email">
					<el-input type="text" v-model="admin.email" autocomplete="off"></el-input>
				</el-form-item>



			</el-form>

			<div>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</div>

		</el-dialog>


		<!-- 分配角色弹窗 -->
		<el-dialog title="修改" :visible.sync="fendialogFormVisible">


			<el-form :model="admin" status-icon :rules="rules" ref="fenForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="用户名">
					<el-input type="text" v-model="admin.adminName" autocomplete="off"></el-input>
				</el-form-item>



				<el-radio-group v-model="role1">
					<el-radio v-for="ii in role" :label="ii.id">{{ii.name}}</el-radio>

				</el-radio-group>

			</el-form>


			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm2('fenForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm2('fenForm')">确 定</el-button>
			</div>

		</el-dialog>

	</div>







</template>

<script>
	import qs from 'qs'
	export default {
		data() {
			var checkSex = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入性别'));
				} else if (value !== '男' && value != '女') {
					callback(new Error('请输入男!'));
				} else {
					callback();
				}
			};

			var checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('年龄不能为空'));
				}
				setTimeout(() => {
					if (!Number.isInteger(value)) {
						callback(new Error('请输入数字值'));
					} else {
						if (value < 18) {
							callback(new Error('必须年满18岁'));
						} else {
							callback();
						}
					}
				}, 1000);
			};
			return {
				ad:0,
				tableData: [],
				queryInfo: {
					pageNum: 1,
					username: ''
				},
				admin: {},
				role: [],
				role1: 0,
				total: 0,
				updatedialogFormVisible: false,
				fendialogFormVisible: false,
				fileList: [],
				dialogImageUrl: '',
				dialogVisible: false,

				rules: {
					adminName: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 8,
							message: '长度在 3 到 8 个字符',
							trigger: 'blur'
						}
					],
					sex: [{
						validator: checkSex,
						trigger: 'blur'
					}],
					age: [{
						validator: checkAge,
						trigger: 'blur'
					}],
					phone: [{
							required: true,
							message: '请输入电话',
							trigger: 'blur'
						},
						{
							min: 11,
							max: 11,
							message: '长度为11',
							trigger: 'blur'
						}
					],
					email: [{
							required: true,
							message: '请输入邮箱地址',
							trigger: 'blur'
						},
						{
							type: 'email',
							message: '请输入正确的邮箱地址',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		async mounted() {
			this.ad=window.sessionStorage.getItem("adminId")
			this.queryAll()
		},

		methods: {

			//分配角色
			async fenJ(id) {
				var str = await this.$http.get('fenRole?adminId=' + id)
				this.admin = str.data[0]

				this.role1 = 0
				if (str.data[0].adminRole != null) {

					this.role1 = str.data[0].adminRole.roleId

				}


				this.role = str.data[1]
				this.fendialogFormVisible = true

			},
			//提交
			submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						var param = new URLSearchParams();
						param.append('adminId', this.admin.adminId);
						param.append('adminName', this.admin.adminName);
						param.append('password', this.admin.password);
						param.append('sex', this.admin.sex);
						param.append('age', this.admin.age);
						param.append('phone', this.admin.phone);
						param.append('email', this.admin.email);
						param.append('touXiang', this.admin.touXiang);

						var str = await this.$http.post('updateAdminById', param)
						if (str.data.code == 200) {
							this.$message('修改成功');
							this.$router.push('userH')
							this.queryAll()
							this.updatedialogFormVisible = false
						} else {
							this.$message.error('修改失败')
						}

					} else {
						console.log('提交失败');
						return false;
					}
				});
			},
			//重置
			resetForm(formName) {



				this.updatedialogFormVisible = false


			},
			// 分配角色提交
			async submitForm2(formName) {
				var params = new URLSearchParams();

				params.append('adminId', this.admin.adminId);

				params.append('roleId', this.role1)
				var str = await this.$http.post('updataAdminRole', params)
				if (str.data.code == 200) {
					this.$message("修改成功")
					this.fendialogFormVisible = false
					this.fendialogFormVisible = false

				} else {
					this.$message.error("修改失败")
					this.fendialogFormVisible = false
				}


			},
			resetForm2(formName) {
				this.fendialogFormVisible = false

			},

			// 处理上传后返回值的函数
			handSuccess(response) {
				if (response.code == 200) {

					this.admin.touXiang = response.message


				} else {

					this.$message.error('上传失败')
				}
			},
			// 图片移除
			handleRemove(file, fileList) {
				this.admin.touXiang = ''

			},
			// 图片放大
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},

			async showById(aId) {

				var str = await this.$http.get('queryAdminById?adminId=' + aId)

				if (str.data.code == 200) {
					this.fileList = []
					this.admin = str.data.data
					var uu = {
						url: 'http://localhost:8080/vuequeryimg?touXiang=' + str.data.data.touXiang
					}
					this.fileList.push(uu)

					this.updatedialogFormVisible = true
				} else {
					this.$message.error("这条数据有误")
				}




			},
			 deleteId(aId) {
				this.$confirm('确定删除吗', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async() => {
					
					var str = await this.$http.get('deleteAdminById?adminId=' + aId)
					if (str.data.code == 200) {
						this.queryAll()
						this.$router.push('/userH')
					}
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});


			},
			usermainadd() {
				this.$router.push('/userHadd')
			},
			async queryAll() {
				// vueUsers
				var params = new URLSearchParams();
				params.append('pageNum', this.queryInfo.pageNum)
				params.append('adminName', this.queryInfo.username)
				var res = await this.$http.post('queryAdminAll', params)
				// 把查询后的结果赋值给 userList
				this.tableData = res.data.list;
				// 把数据总条数赋值给 totle
				this.total = res.data.total;
				
				
			},
			// 页码大小
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			// 页码变动
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.queryAll();
			}
		}
	}
</script>

<style>
	.Uesr1 {
		width: 1100px;

	}
</style>
